<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
      :leave-active-class="proxy?.animate.searchAnimate.leave">
      <searchrevealing>
        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <div v-if="moduleName == 'SupplierAddProducts'">
            <el-form-item label="商品编码" prop="styleCode">
              <el-input v-model="queryParams.styleCode" placeholder="请输入商品编码" clearable style="width: 220px"
                @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label="商品名称" prop="styleName">
              <el-input v-model="queryParams.styleName" placeholder="请输入商品名称" clearable style="width: 220px"
                @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item label="类目" prop="category">
              <el-cascader v-model="queryParams.category" :props="categoryProps" style="width: 220px" clearable
                ref="categoryRef" @change="handleChange" placeholder="请选择类目" />
            </el-form-item>

            <el-form-item label="合作方式" prop="cooperationMode">
              <el-select v-model="queryParams.cooperationMode" placeholder="请选择合作方式" clearable style="width: 220px">
                <el-option v-for="dict in hm_cooperation_mode" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>

            <el-form-item label="品牌" prop="brand">
              <el-select v-model="queryParams.brand" placeholder="请选择品牌" clearable style="width: 220px">
                <el-option v-for="dict in brandList" :key="dict.id" :label="dict.brandName" :value="dict.id" />
              </el-select>
            </el-form-item>
          </div>
          <div v-if="moduleName == 'SampleManagement'">
            <el-form-item label="邀约类型" prop="inviteType">
              <el-select v-model="queryParams.inviteType" placeholder="请选择邀约类型" clearable style="width: 220px">
                <el-option v-for="dict in hm_invite_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="邀约人" prop="inviter">
              <el-select v-model="queryParams.inviter" placeholder="请选择邀约人" clearable style="width: 220px">
                <el-option v-for="dict in hm_inviter" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="发货情况" prop="auditStatu">
              <el-select v-model="queryParams.auditStatu" placeholder="请选择发货情况" clearable style="width: 220px"
                @change="auditStatuChange">
                <el-option v-for="dict in auditStatusList" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </div>

          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </searchrevealing>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8" v-if="moduleName == 'SupplierAddProducts'">
          <el-col :span="1.5">
            <el-button type="primary" @click="handleAdd">新建商品</el-button>
          </el-col>

          <el-col :span="1.5">
            <el-button type="success" :disabled="multiple" @click="handleProductReporting()">商品提报</el-button>
          </el-col>

          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-row :gutter="10" class="mb8" v-if="moduleName == 'SampleManagement'">
          <el-col :span="1.5">
            <el-button type="primary" :disabled="multiple" @click="handleInvite('multiple')">邀约响应</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table type="selection" v-loading="loading" :data="supplierAddProductsList"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" :selectable="isRowSelectable" width="55" align="center" />
        <!-- <el-table-column label="" align="center" prop="id" v-if="true" /> -->
        <el-table-column label="商品名称" align="center" prop="styleName">
          <template #default="scope">
            <div class="color_theme">{{ scope.row.styleName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="商品编码" align="center" prop="styleCode" />
        <el-table-column label="商品图片" align="center" prop="productImage" width="100">
          <template #default="scope">
            <image-preview :src="scope.row.productImage" :width="50" :height="50" />
          </template>
        </el-table-column>
        <el-table-column label="商品状态" align="center" prop="auditStatus" v-if="moduleName == 'SupplierAddProducts'">
          <template #default="scope">
            {{ auditStatusNameById(scope.row.auditStatus) }}
          </template>
        </el-table-column>

        <el-table-column label="类目" align="center" prop="categoryName">
          <!-- <template #default="scope">
            <dict-tag :options="hm_category" :value="scope.row.category" />
          </template> -->
        </el-table-column>
        <el-table-column label="品牌" align="center" prop="brand">
          <template #default="scope">
            {{ handleFilterBrand(scope.row.brand, brandList) }}
          </template>
        </el-table-column>
        <el-table-column label="店铺名称" align="center" prop="storeName" />
        <el-table-column label="在售链接" align="center" prop="saleLink" show-overflow-tooltip
          v-if="moduleName == 'SupplierAddProducts'">
          <template #default="scope">
            <el-link :href="scope.row.saleLink" type="primary" target="_blank">{{ scope.row.saleLink }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="意向主播" align="center" prop="likePerson" v-if="moduleName == 'SupplierAddProducts'">
          <template #default="scope">
            <dict-tag :options="hm_anchor" :value="scope.row.likePerson" />
          </template>
        </el-table-column>
        <el-table-column label="直播机制" align="center" prop="liveStreamingMechanism"
          v-if="moduleName == 'SupplierAddProducts'" />

        <el-table-column label="商品卖点" align="center" prop="sellingPoints" v-if="moduleName == 'SupplierAddProducts'" />

        <el-table-column label="邀约类型" align="center" prop="inviteType" v-if="moduleName == 'SampleManagement'">
          <template #default="scope">
            <div>{{ handleFilters(scope.row.inviteType, hm_invite_type) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="邀约人" align="center" prop="inviter" v-if="moduleName == 'SampleManagement'">
          <template #default="scope">
            <div>{{ handleFilters(scope.row.inviter, hm_inviter) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="邀约时间" align="center" prop="inviteTime" v-if="moduleName == 'SampleManagement'" />
        <el-table-column label="响应状态" align="center" prop="auditStatus" v-if="moduleName == 'SampleManagement'">
          <template #default="scope">
            <div>{{ auditStatusNameById(scope.row.auditStatus) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="发货方式" align="center" prop="shippingMethod" v-if="moduleName == 'SampleManagement'">
          <template #default="scope">
            <div>{{ handleFilters(scope.row.shippingMethod, hm_send) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="物流单号" align="center" prop="trackingNumber" v-if="moduleName == 'SampleManagement'" />

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <div v-if="moduleName == 'SupplierAddProducts'">
              <el-button link type="primary" @click="handleInfo(scope.row)" class="color_theme"> 查看详情</el-button>
              <el-button link type="primary" @click="handleUpdate(scope.row, 'edit')"
                style="margin-left: 0px !important" class="color_theme"
                :disabled="handleDisabled(scope.row.auditStatus)">
                编辑</el-button>
              <el-button link type="primary" @click="handleUpdate(scope.row, 'credential')"
                :disabled="handleDisabled(scope.row.auditStatus)" style="margin-left: 0px !important"
                class="color_theme">
                补充资质</el-button>

              <el-button link type="primary" @click="handleDelete(scope.row)" style="margin-left: 0px !important"
                :disabled="handleDisabled(scope.row.auditStatus)" class="color_theme">删除</el-button>
            </div>
            <div v-if="moduleName == 'SampleManagement'">
              <el-button link type="primary" @click="handleInvite('single', scope.row)"
                :disabled="scope.row.auditStatus == '6'" class="color_theme">
                邀约响应</el-button>
              <el-button link type="primary" @click="handleInfo(scope.row)" style="margin-left: 0px !important"
                class="color_theme">
                查看详情</el-button>
              <el-button link type="primary" @click="feedback(scope.row)" :disabled="scope.row.auditStatus == '6'"
                style="margin-left: 0px !important" class="color_theme">
                无货反馈</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <!-- 添加或修改供应商添加商品抽屉 -->
    <el-drawer :close-on-click-modal="false" class="hm-drawer" v-model="dialog.visible" size="70%" direction="rtl">
      <template #header>
        <div class="hm-box-title">{{ dialog.title }}</div>
      </template>

      <el-form ref="supplierAddProductsFormRef" :model="form" style="width: 100%" :inline="true" :rules="rules"
        label-width="100px" scroll-to-error>
        <div class="hm-form-item-box">
          <div class="hm-form-title" style=" position: relative; ">基本信息</div>

          <el-form-item label="简易提报" v-show="!fold">
            <el-switch :disabled="credentialMode" v-model="easyMode" active-text="开启" inactive-text="关闭"
              @change="handleEasyMode" />
          </el-form-item>

          <el-row class="hm-row3" :gutter="60">
            <el-col :span="8">
              <el-form-item label="商品名称" prop="styleName">
                <el-input :disabled="credentialMode" v-model="form.styleName" placeholder="请输入商品名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="类目" prop="category">
                <el-cascader :disabled="credentialMode" v-model="form.category" :props="categoryProps" clearable
                  ref="categorysRef" style="width:100%" @change="handleHandleChange" placeholder="请选择类目" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商品编码" prop="styleCode">
                <el-input :disabled="credentialMode" v-model="form.styleCode" placeholder="请输入商品编码" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="hm-row3" :gutter="60">
            <el-col :span="8">
              <el-form-item label="商品价格" prop="price">
                <el-input :disabled="credentialMode" v-model="form.price" placeholder="请输入商品价格" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="品牌" prop="brand">
                <el-select :disabled="credentialMode" v-model="form.brand" placeholder="请选择品牌" clearable>
                  <el-option v-for="dict in brandList" :key="dict.id" :label="dict.brandName"
                    :value="dict.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="贸易方式" prop="tradeMode">
                <el-select v-model="form.tradeMode" placeholder="请选择贸易方式" clearable>
                  <el-option v-for="dict in hm_trade_type" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="hm-row3" v-if="!easyMode" :gutter="60">
            <el-col :span="8" v-show="!credentialMode">
              <el-form-item label="保质期" prop="shelfLife">
                <el-input :disabled="credentialMode" v-model="form.shelfLife" placeholder="请输入保质期" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-show="!credentialMode">
              <el-form-item label="上市时间" prop="listingDate">
                <el-date-picker :disabled="credentialMode" clearable v-model="form.listingDate" type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择上市时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-show="!credentialMode">
              <el-form-item label="产地" prop="origin">
                <el-input :disabled="credentialMode" v-model="form.origin" placeholder="请输入产地" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="hm-row3" :gutter="60">
            <el-col :span="8" style="display: flex;">
              <el-form-item label="在售链接" prop="saleLink">
                <el-input :disabled="credentialMode" v-model="form.saleLink" placeholder="请输入在售链接" clearable />
              </el-form-item>
              <el-button type="primary" :disabled="credentialMode" @click="handleGetLinkInfo">获取商品</el-button>
            </el-col>

            <el-col :span="16">
              <el-form-item label="卖点" prop="sellingPoints">
                <el-input :disabled="credentialMode" v-model="form.sellingPoints" placeholder="请输入卖点" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <div>
            <el-form-item label="商品图片" prop="productImage">
              <image-upload :disabled="credentialMode" v-model="form.productImage" />
            </el-form-item>
          </div>
          <div class="hm-form-title">合作信息</div>

          <el-row class="hm-row3" :gutter="60">
            <el-col :span="8">
              <el-form-item label="合作方式" prop="cooperationMode">
                <el-select :disabled="credentialMode" v-model="form.cooperationMode" placeholder="请选择合作方式" clearable>
                  <el-option v-for="dict in hm_cooperation_mode" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="成本价" prop="costPrice">
                <el-input :disabled="credentialMode" v-model="form.costPrice" placeholder="请输入成本价" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="招商员" prop="recruiter">
                <el-input disabled v-model="form.recruiter" placeholder="请输入招商员(调取供应商账号设置-对接人)" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="hm-row3" v-if="!easyMode" :gutter="60">
            <el-col :span="8" v-show="!credentialMode">
              <el-form-item label="店铺名称" prop="storeName">
                <el-input :disabled="credentialMode" v-model="form.storeName" placeholder="请输入店铺名称" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="直播机制" prop="liveStreamingMechanism">
                <el-input :disabled="credentialMode" v-model="form.liveStreamingMechanism" placeholder="请输入直播机制"
                  clearable />
              </el-form-item>
            </el-col>

            <el-col :span="8" v-show="credentialMode">
              <el-form-item label="佣金" prop="commission">
                <el-input :disabled="credentialMode" v-model.number="form.commission" placeholder="请输入佣金" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="8" v-show="!credentialMode">
              <el-form-item label="材质/成分" prop="ingredient">
                <el-input :disabled="credentialMode" v-model="form.ingredient" placeholder="请输入材质/成分" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="hm-row3" v-if="!easyMode" :gutter="60">
            <el-col :span="8" v-show="!credentialMode">
              <el-form-item label="意向主播" prop="likePerson">
                <el-select :disabled="credentialMode" v-model="form.likePerson" placeholder="请选择意向主播" clearable>
                  <el-option v-for="dict in hm_anchor" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8" v-show="!credentialMode">
              <el-form-item label="佣金" prop="commission">
                <el-input :disabled="credentialMode" v-model="form.commission" placeholder="请输入佣金" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="8" v-show="!credentialMode">
              <el-form-item label="工厂名称" prop="factoryName">
                <el-input :disabled="credentialMode" v-model="form.factoryName" placeholder="请输入工厂名称" clearable />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="hm-row3" v-if="!easyMode" :gutter="60">
            <el-col :span="8" v-show="!credentialMode">
              <el-form-item label="能否破价" prop="discountPrice">
                <el-select :disabled="credentialMode" v-model="form.discountPrice" placeholder="请选择能否破价" clearable>
                  <el-option v-for="dict in hm_discount" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8"> </el-col>
            <el-col :span="8"> </el-col>
          </el-row>

          <el-row class="hm-row3" v-if="easyMode" :gutter="60">
            <el-col :span="8">
              <el-form-item label="直播机制" prop="liveStreamingMechanism">
                <el-input :disabled="credentialMode" v-model="form.liveStreamingMechanism" placeholder="请输入直播机制"
                  clearable />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="佣金" prop="commission">
                <el-input :disabled="credentialMode" v-model="form.commission" placeholder="请输入佣金" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="能否破价" prop="discountPrice">
                <el-select :disabled="credentialMode" v-model="form.discountPrice" placeholder="请选择能否破价" clearable>
                  <el-option v-for="dict in hm_discount" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <div class="hm-form-title">
            资质信息
            <el-switch v-model="fold" inline-prompt active-text="折叠" inactive-text="开启" />
          </div>
          <transition name="collapse">
            <el-row class="hm-row3" :gutter="60" v-if="fold">
              <el-col :span="12">
                <el-form-item label="商品图片（正面实拍）" prop="productFrontImage">
                  <image-upload v-model="form.productFrontImage" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="商品图片（反面生产信息图）" prop="produckBackImage">
                  <image-upload v-model="form.produckBackImage" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="备案凭证/行政许可批件" prop="voucherImage">
                  <image-upload v-model="form.voucherImage" />
                </el-form-item>
              </el-col>

              <el-col v-if="form.tradeMode == '1'" :span="12">
                <el-form-item label="进口货物/原材料报关单" prop="customsDeclarationImage">
                  <image-upload v-model="form.customsDeclarationImage" />
                </el-form-item>
              </el-col>

              <el-col v-if="form.tradeMode == '1'" :span="12">
                <el-form-item label="进口产品备案材料" prop="customsInformationImage">
                  <image-upload v-model="form.customsInformationImage" />
                </el-form-item>
              </el-col>

              <el-col v-if="form.tradeMode == '1'" :span="12">
                <el-form-item label="进口产品原材料检验检疫证明" prop="customsInspectionImage">
                  <image-upload v-model="form.customsInspectionImage" />
                </el-form-item>
              </el-col>

              <el-col v-if="form.tradeMode == '1'" :span="12">
                <el-form-item label="检测报告" prop="customsTestReportImgae">
                  <image-upload v-model="form.customsTestReportImgae" />
                </el-form-item>
              </el-col>
            </el-row>
          </transition>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-drawer>

    <!--商品详情抽屉 -->
    <el-drawer :close-on-click-modal="false" class="hm-drawer" v-model="dialogInfo.visible" size="70%" direction="rtl">
      <template #header>
        <div class="hm-box-title">{{ dialogInfo.title }}</div>
      </template>

      <div class="hm-form-item-box1">
        <div class="hm-form-title" style=" position: relative; ">基本信息</div>

        <el-row class="hm-row3 mb96" :gutter="60">
          <div style="margin-left: 30px">
            <image-preview :src="form.productImage" :width="380" :height="260" />
          </div>
          <el-col :span="13">
            <el-descriptions :column="2">
              <el-descriptions-item width="50%" label="商品名称">{{ form.styleName }}</el-descriptions-item>
              <el-descriptions-item label="类目">{{ form.categoryName }}</el-descriptions-item>
              <el-descriptions-item label="商品编码">{{ form.styleCode }}</el-descriptions-item>

              <el-descriptions-item label="品牌"> {{ handleFilterBrand(form.brand, brandList) }}</el-descriptions-item>
              <el-descriptions-item label="贸易方式">{{ handleFilters(form.tradeMode, hm_trade_type)
                }}</el-descriptions-item>
              <el-descriptions-item label="保质期（天）">{{ form.shelfLife }}</el-descriptions-item>
              <el-descriptions-item label="上市时间">{{ form.listingDate }}</el-descriptions-item>
              <el-descriptions-item label="产地">{{ form.origin }}</el-descriptions-item>
              <el-descriptions-item label="售卖价格">{{ form.price }}</el-descriptions-item>
              <el-descriptions-item label="卖点">{{ form.sellingPoints }}</el-descriptions-item>
              <el-descriptions-item width="50%" label="在售链接">
                <!-- <el-tag size="small">{{ form.saleLink }}</el-tag> -->
                <el-link :href="form.saleLink" type="primary" target="_blank">{{ form.saleLink }}</el-link>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <div class="hm-form-title">本次合作信息</div>

        <el-row class="hm-row3 mb96" :gutter="120">
          <el-col :span="24">
            <el-descriptions>
              <el-descriptions-item width="33%" label="合作方式">{{ handleFilters(form.cooperationMode, hm_cooperation_mode)
                }}</el-descriptions-item>
              <el-descriptions-item label="商家名称"> {{ form.supplierName }}</el-descriptions-item>
              <el-descriptions-item label="招商员">{{ form.recruiter }}</el-descriptions-item>
              <el-descriptions-item label="直播机制">
                <el-tag size="small">{{ form.liveStreamingMechanism }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="佣金">{{ form.commission }}</el-descriptions-item>
              <el-descriptions-item label="成本价">{{ form.costPrice }}</el-descriptions-item>
              <el-descriptions-item label="卖点">{{ form.sellingPoints }}</el-descriptions-item>
              <el-descriptions-item label="店铺名称">{{ form.storeName }}</el-descriptions-item>
              <el-descriptions-item label="材质/成分">{{ form.ingredient }}</el-descriptions-item>
              <el-descriptions-item label="工厂名称">{{ form.factoryName }}</el-descriptions-item>
              <el-descriptions-item label="意向主播">{{ handleFilters(form.likePerson, hm_anchor)
                }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <div class="hm-form-title">资质信息</div>
        <el-form ref="supplierAddProductsFormRefs" :model="form" style="width: 100%" :inline="true" label-width="200px">
          <el-row class="hm-row3" :gutter="60">
            <el-col :span="12">
              <el-form-item label="商品图片（正面实拍）" prop="productFrontImage">
                <image-upload v-model="form.productFrontImage" :disabled="true" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="商品图片（反面生产信息图）" prop="produckBackImage">
                <image-upload v-model="form.produckBackImage" :disabled="true" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="备案凭证/行政许可批件" prop="voucherImage">
                <image-upload v-model="form.voucherImage" :disabled="true" />
              </el-form-item>
            </el-col>

            <el-col v-if="form.tradeMode == '1'" :span="12">
              <el-form-item label="进口货物/原材料报关单" prop="customsDeclarationImage">
                <image-upload v-model="form.customsDeclarationImage" :disabled="true" />
              </el-form-item>
            </el-col>

            <el-col v-if="form.tradeMode == '1'" :span="12">
              <el-form-item label="进口产品备案材料" prop="customsInformationImage">
                <image-upload v-model="form.customsInformationImage" :disabled="true" />
              </el-form-item>
            </el-col>

            <el-col v-if="form.tradeMode == '1'" :span="12">
              <el-form-item label="进口产品原材料检验检疫证明" prop="customsInspectionImage">
                <image-upload v-model="form.customsInspectionImage" :disabled="true" />
              </el-form-item>
            </el-col>

            <el-col v-if="form.tradeMode == '1'" :span="12">
              <el-form-item label="检测报告" prop="customsTestReportImgae">
                <image-upload v-model="form.customsTestReportImgae" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-drawer>

    <!-- 邀约响应 -->
    <el-drawer :close-on-click-modal="false" class="hm-drawer" v-model="dialogleInvite.visible" size="70%"
      direction="rtl">
      <template #header>
        <div class="hm-box-title">{{ dialogleInvite.title }}</div>
      </template>
      <el-form ref="supplierAddProductsFormRefInvite" :model="formInvite" style="width: 100%" :inline="true"
        label-width="135px" :rules="rulesInvite">
        <el-row class="hm-row3" :gutter="60">
          <el-col :span="8">
            <el-form-item label="邮寄方式" prop="shippingMethod">
              <el-select v-model="formInvite.shippingMethod" placeholder="请选择邮寄方式">
                <el-option v-for="dict in hm_send" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物流司机联系方式" prop="driverPhone">
              <el-input v-model="formInvite.driverPhone" placeholder="请输入物流司机联系方式" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递单号" prop="trackingNumber">
              <el-input v-model="formInvite.trackingNumber" placeholder="请输入快递单号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="hm-row3" :gutter="60">
          <el-col :span="8">
            <el-form-item label="快递公司" prop="shippingCompany">
              <el-select v-model="formInvite.shippingCompany" placeholder="请选择快递公司">
                <el-option
                  v-for="dict in (formInvite.shippingMethod == '1' ? hm_express : formInvite.shippingMethod == '2' ? hm_shipping : [])"
                  :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="hm-form-title">发货数量</div>
        <el-table :data="formInvite.data">
          <el-table-column label="商品名称" align="center" prop="styleName" />
          <el-table-column label="商品编码" align="center" prop="styleCode" />
          <el-table-column label="商品图片" align="center" prop="productImage" width="100">
            <template #default="scope">
              <image-preview :src="scope.row.productImage" :width="50" :height="50" />
            </template>
          </el-table-column>
          <el-table-column label="类目" align="center" prop="categoryName">
            <!-- <template #default="scope">
              <dict-tag :options="hm_category" :value="scope.row.category" />
            </template> -->
          </el-table-column>
          <el-table-column label="发货数量" align="center" prop="inventory">
            <template #default="{ row, $index }">
              <el-form-item :prop="`data.${$index}.inventory`" :rules="rulesInvite.inventory">
                <el-input v-model="row.inventory" placeholder="请输入发货数量" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelInvite">取 消</el-button>
          <el-button :loading="buttonLoading" type="primary" @click="submitFormInvite">发货确认</el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 无货反馈 -->
    <el-dialog :title="dialogFile.title" v-model="dialogFile.visible" width="600px" append-to-body>
      <el-form ref="feedbackFormRef" :model="feedbackForm" :rules="feedbackRules" label-width="80px">
        <el-form-item label="商品名称">
          {{ feedbackData.styleName }}
        </el-form-item>
        <el-form-item label="反馈意见" prop="stockRemarks">
          <el-input v-model="feedbackForm.stockRemarks" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitFormFeedback">确 定</el-button>
          <el-button @click="cancelFeedback">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="SupplierAddProducts" lang="ts">
import { useRoute, useRouter } from 'vue-router';
import {
  listSupplierAddProduct,
  getSupplierAddProducts,
  delSupplierAddProducts,
  addSupplierAddProducts,
  updateSupplierAddProducts,
  getSupplierLinkInfo,
  auditSupplierAddProducts,
  auditSupplierInvite,
  hmProductsStock,
  getcommodityinfobykwaiitemid,
  getproductscategorychildlistbypid,
  getproductscategorypaterlistbycid
} from '@/api/system/supplierAddProducts';
import { hmSupplierList } from '@/api/group/supplier/index';
import { BrandVO } from '@/api/system/brand/types';
import { listBrand } from '@/api/system/brand';
import { SupplierAddProductsVO, SupplierAddProductsQuery, SupplierAddProductsForm, FormInvite } from '@/api/system/supplierAddProducts/types';
import { handleFilters } from '@/utils/handleFilters';
import { number } from 'vue-types';
import { auditStatusNameById } from '@/utils/auditStatusFilter';
import { useUserStore } from '@/store/modules/user';
import { fieldMapping, fieldMappingType } from '@/utils/kuasihouData';
import { formatDate } from '@/utils/index';
import { validateSpaceAndEmoji } from '@/utils/validate';

// 暂用nickname代替商家名称
const { userId } = useUserStore();

// const router = useRouter()
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const { hm_supplier_product_type } = toRefs<any>(proxy?.useDict('hm_supplier_product_type'));
const { hm_trade_type } = toRefs<any>(proxy?.useDict('hm_trade_type'));
const { hm_discount } = toRefs<any>(proxy?.useDict('hm_discount'));
const { hm_cooperation_mode } = toRefs<any>(proxy?.useDict('hm_cooperation_mode'));
const { hm_category } = toRefs<any>(proxy?.useDict('hm_category'));
const { hm_anchor } = toRefs<any>(proxy?.useDict('hm_anchor'));
const { hm_invite_type } = toRefs<any>(proxy?.useDict('hm_invite_type'));
const { hm_inviter } = toRefs<any>(proxy?.useDict('hm_inviter'));
const { hm_send } = toRefs<any>(proxy?.useDict('hm_send'));
const { hm_shipping } = toRefs<any>(proxy?.useDict('hm_shipping'));
const { hm_express } = toRefs<any>(proxy?.useDict('hm_express'));
const moduleName: any = ref('');
const _title: any = ref('');
const brandList = ref<BrandVO[]>([]);
const categorylist = ref<any>([]);

const supplierAddProductsList = ref<SupplierAddProductsVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const names = ref<Array<string>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const easyMode = ref(false);
const credentialMode = ref(false);
const queryFormRef = ref<ElFormInstance>();
const supplierAddProductsFormRef = ref<ElFormInstance>();
const supplierAddProductsFormRefInvite = ref<ElFormInstance>();
const feedbackFormRef = ref<ElFormInstance>();
const fold = ref(false);
const selectionInvite = ref<SupplierAddProductsForm[]>([]);
const feedbackData = ref();
const categoryId = ref<number[]>([]);
const categoryRef = ref();
const categorysRef = ref();

// 类目请求方法封装
const ategoryQuest = (pid: string | number, level: number, resolve: (data: any) => void) => {
  getproductscategorychildlistbypid({ pid: pid }).then((res) => {
    const datas = res.rows.map((value: { categoryId: string; categoryName: string }) => ({
      value: value.categoryId,
      label: value.categoryName
      // leaf: level >= 3
    }));
    resolve(datas);
  });
};

// 类目props
const categoryProps = reactive({
  lazy: true,
  checkStrictly: true,
  lazyLoad(node: any, resolve: (data: any) => void) {
    const { level } = node;
    const pid = !level ? 0 : node.value;
    ategoryQuest(pid, level, resolve);
  }
});

// 筛选类目change事件
const handleChange = (val: [string, string, string, string]) => {
  if (val) {
    categoryRef.value.togglePopperVisible();
    queryParams.value.category = val[val.length - 1];
    queryParams.value.firstCategory = val[0];
    queryParams.value.secondCategory = val[1];
    queryParams.value.thirdCategory = val[2];
    queryParams.value.fourthCategory = val[3];
  } else {
    queryParams.value.firstCategory = undefined;
    queryParams.value.secondCategory = undefined;
    queryParams.value.thirdCategory = undefined;
    queryParams.value.fourthCategory = undefined;
  }
};

// 新增编辑筛选事件
const handleHandleChange = (val: [string, string, string, string]) => {
  if (val) {
    categorysRef.value.togglePopperVisible();
    form.value.category = val[val.length - 1];
    form.value.firstCategory = val[0];
    form.value.secondCategory = val[1];
    form.value.thirdCategory = val[2];
    form.value.fourthCategory = val[3];
  }
};

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const dialogInfo = reactive<DialogOption>({
  visible: false,
  title: '商品详情'
});

const dialogleInvite = reactive<DialogOption>({
  visible: false,
  title: ''
});

const dialogFile = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: SupplierAddProductsForm = {
  id: undefined,
  styleName: undefined,
  category: undefined,
  styleCode: undefined,
  price: undefined,
  brand: undefined,
  tradeMode: undefined,
  shelfLife: undefined,
  listingDate: undefined,
  origin: undefined,
  saleLink: undefined,
  sellingPoints: undefined,
  productImage: undefined,
  cooperationMode: undefined,
  costPrice: undefined,
  recruiter: undefined,
  storeName: undefined,
  liveStreamingMechanism: undefined,
  ingredient: undefined,
  likePerson: undefined,
  commission: undefined,
  factoryName: undefined,
  discountPrice: undefined,
  auditStatus: undefined,
  remark: undefined,
  supplierName: undefined
};

const data = reactive<PageData<SupplierAddProductsForm, SupplierAddProductsQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    styleName: undefined,
    category: undefined,
    styleCode: undefined,
    price: undefined,
    brand: undefined,
    tradeMode: undefined,
    shelfLife: undefined,
    listingDate: undefined,
    origin: undefined,
    saleLink: undefined,
    sellingPoints: undefined,
    productImage: undefined,
    cooperationMode: undefined,
    costPrice: undefined,
    recruiter: undefined,
    storeName: undefined,
    liveStreamingMechanism: undefined,
    ingredient: undefined,
    likePerson: undefined,
    commission: undefined,
    factoryName: undefined,
    discountPrice: undefined,
    auditStatus: undefined,
    auditStatu: undefined,
    params: {}
  },
  rules: {
    styleName: [
      { required: true, message: '商品名称不能为空', trigger: 'blur' },
      { min: 2, max: 20, message: '商品名称长度必须介于 2 和 20 之间', trigger: 'blur' },
      { validator: validateSpaceAndEmoji }
    ],
    category: [{ required: true, message: '请选择类目', trigger: 'change' }],
    styleCode: [{ required: true, message: '请输入商品编码', trigger: 'blur' }, { validator: validateSpaceAndEmoji }],
    price: [
      { required: true, message: '请输入商品价格', trigger: 'blur' },
      { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: '请输入正确的产品价格:整数或者保留两位小数' }
    ],
    brand: [{ required: true, message: '请选择品牌', trigger: 'change' }],
    sellingPoints: [{ required: true, message: '请输入卖点', trigger: 'blur' }],
    productImage: [{ required: true, message: '请上传商品图片', trigger: 'change' }],
    cooperationMode: [{ required: true, message: '请选择合作方式', trigger: 'change' }],
    costPrice: [
      { required: true, message: '请输入成本价', trigger: 'blur' },
      { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: '请输入正确的成本价:整数或者保留两位小数' }
    ],
    // recruiter: [{ required: true, message: '请输入招商员', trigger: 'blur' }],
    liveStreamingMechanism: [{ required: true, message: '请输入直播机制', trigger: 'blur' }, { validator: validateSpaceAndEmoji }],
    commission: [
      { required: true, message: '请输入佣金', trigger: 'blur' },
      { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: '请输入正确的佣金:整数或者保留两位小数' }
    ],
    discountPrice: [{ required: true, message: '请选择是否破价', trigger: 'change' }]
  }
});

const { queryParams, form, rules } = toRefs(data);

const rulesInvite = reactive({
  shippingMethod: [
    {
      required: true,
      message: '请选择邮寄方式',
      trigger: 'change'
    }
  ],
  driverPhone: [
    { required: true, message: '请输入物流司机联系方式', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的入物流司机联系方式' }
  ],
  trackingNumber: [{ required: true, message: '请输入快递单号', trigger: 'blur' }],
  shippingCompany: [
    {
      required: true,
      message: '请选择快递公司',
      trigger: 'change'
    }
  ],
  inventory: [{ required: true, message: '请输入数量', trigger: 'blur' }]
});

const formInvite = reactive<FormInvite>({
  shippingMethod: '',
  driverPhone: null,
  trackingNumber: '',
  shippingCompany: '',
  data: []
});

const feedbackForm = reactive({
  stockRemarks: ''
});
const feedbackRules = reactive({
  stockRemarks: [
    {
      required: true,
      message: '请输入反馈意见',
      trigger: 'blur'
    }
  ]
});

const initFormDataInvite: FormInvite = {
  shippingMethod: '',
  driverPhone: null,
  trackingNumber: '',
  shippingCompany: '',
  data: []
};

const auditStatusList = [
  { label: '未发货', value: '4' },
  { label: '已发货', value: '6' }
];

/** 0 1 2 不可编辑 补充资质 删除 */
const handleDisabled = (auditStatus: string) => {
  if (auditStatus == '0' || auditStatus == '1' || auditStatus == '2') {
    return false;
  } else {
    return true;
  }
};

/**
 * 品牌检索value
 * @param para
 * @param dict
 */
const handleFilterBrand = (para: string | number | undefined, dict: Array<any>) => {
  let _label = '';
  dict.forEach((item: any) => {
    if (item.id == String(para)) {
      _label = item.brandName;
    }
  });
  return _label;
};

/**
 * 获取品牌信息
 */
const getListBrand = async () => {
  const res = await listBrand();
  brandList.value = res.rows;
};

/** 手动清除商品图片的验证 */
watch(
  () => form.value.productImage,
  async (val) => {
    if (val) {
      supplierAddProductsFormRef.value?.clearValidate(['productImage']);
    }
  }
);

/** 查询供应商添加商品列表 */
const getList = async () => {
  try {
    loading.value = true;
    const res = await listSupplierAddProduct(queryParams.value);
    supplierAddProductsList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  } catch (e) {
  } finally {
    loading.value = false;
  }
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  supplierAddProductsFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/**
 *
 */
const auditStatuChange = (value: string) => {
  queryParams.value.pageNum = 1;
  queryParams.value.auditStatus = value;
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  queryParams.value.firstCategory = undefined;
  queryParams.value.secondCategory = undefined;
  queryParams.value.thirdCategory = undefined;
  queryParams.value.fourthCategory = undefined;
  if (route.name == 'SampleManagement') {
    queryParams.value.auditStatus = '4,6';
  } else {
    queryParams.value.auditStatus = '';
  }
  handleQuery();
};

/** 多选禁用 */
const isRowSelectable = (row: SupplierAddProductsVO) => {
  if (moduleName.value == 'SupplierAddProducts') {
    return row.auditStatus == '0' || row.auditStatus == '2';
  } else if (moduleName.value == 'SampleManagement') {
    return row.auditStatus == '4';
  } else {
    return true;
  }
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: SupplierAddProductsVO[]) => {
  ids.value = selection.map((item) => item.id);
  names.value = selection.map((item) => item.styleName);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  // 保存选中邀约数据
  selectionInvite.value = selection;
};

/** 新增按钮操作 */
const handleAdd = async () => {
  reset();
  const res = await hmSupplierList(userId as any);
  form.value.recruiter = res.rows[0].recruiter;
  credentialMode.value = false;
  dialog.visible = true;
  fold.value = false;
  dialog.title = '添加商品';
  _title.value = '添加商品';
};
/** 切换提报模式 */
const handleEasyMode = () => {
  dialog.title = easyMode.value ? '简易提报' : _title.value;
};

/** 修改按钮操作 */
const handleUpdate = (row?: SupplierAddProductsVO, _type?: string) => {
  loading.value = true;
  dialog.visible = true;
  dialog.title = '修改商品';
  _title.value = '修改商品';
  credentialMode.value = _type == 'credential' ? true : false;
  if (_type) {
    fold.value = true;
  }
  nextTick(async () => {
    reset();
    const _id = row?.id || ids.value[0];
    const res = await getSupplierAddProducts(_id);
    loading.value = false;
    Object.assign(form.value, res.data);
    const category = [];
    form.value.firstCategory && category.push(Number(form.value.firstCategory));
    form.value.secondCategory && category.push(Number(form.value.secondCategory));
    form.value.thirdCategory && category.push(Number(form.value.thirdCategory));
    form.value.fourthCategory && category.push(Number(form.value.fourthCategory));
    form.value.category = category;
  });
};

/** 查看商品详情 */
const handleInfo = (row?: SupplierAddProductsVO) => {
  loading.value = true;
  dialogInfo.visible = true;
  nextTick(async () => {
    reset();
    const _id = row?.id || ids.value[0];
    const res: any = await getSupplierAddProducts(_id);
    loading.value = false;
    Object.assign(form.value, res.data);
  });
};

/**
 * 根据id反查类目值
 *  type: []
 */
const handleCategoryId = (res: any) => {
  if (res.categoryId) {
    categoryId.value.push(res.categoryId);
    if (res.children) {
      handleCategoryId(res.children);
    }
  }
};

/** 一键获取信息 */
const handleGetLinkInfo = async () => {
  // window.open(form.value.saleLink, '_blank');
  categoryId.value = [];
  const res = await getcommodityinfobykwaiitemid({ kwaiItemId: form.value.saleLink });
  console.log(JSON.parse(res.msg));
  const resData = JSON.parse(res.msg).data;
  if (JSON.parse(res.msg).code == '1' && JSON.parse(res.msg).msg == 'success') {
    for (const [sourceFieldName, targetFieldName] of Object.entries(fieldMapping)) {
      if (resData.hasOwnProperty(sourceFieldName)) {
        // 使用映射的目标字段名来赋值给 form.value

        // 上市时间
        if (sourceFieldName == 'createdTime') {
          form.value[targetFieldName] = formatDate(resData[sourceFieldName]);
          // 价格 ==== 默认取第一个款式
        } else if (sourceFieldName == 'skuInfos') {
          form.value[targetFieldName] = resData[sourceFieldName][0].skuSalePrice / 100;
        } else {
          form.value[targetFieldName] = resData[sourceFieldName];
        }
      }
    }
    const res = await getproductscategorypaterlistbycid({ cid: resData.categoryId });
    await handleCategoryId(res.data);
    form.value.category = categoryId.value;
  } else {
    proxy?.$modal.msgError(JSON.parse(res.msg).error_msg);
  }
};

/** 提交按钮 */
const submitForm = () => {
  supplierAddProductsFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      delete form.value.recruiter;
      if (form.value.id) {
        await updateSupplierAddProducts(form.value).finally(() => (buttonLoading.value = false));
      } else {
        await addSupplierAddProducts(form.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess(form.value.id ? '修改成功' : '添加成功');
      dialog.visible = false;
      credentialMode.value = false;
      easyMode.value = false;
      await getList();
    }
  });
};

/** 删除按钮操作 */
const handleDelete = async (row?: SupplierAddProductsVO) => {
  const _ids = row?.id || ids.value;
  const _names = row?.styleName || names.value;
  await proxy?.$modal.confirm('是否确认删除供应商，商品名称为"' + _names + '"的数据项？').finally(() => (loading.value = false));
  await delSupplierAddProducts(_ids);
  proxy?.$modal.msgSuccess('删除成功');
  await getList();
};

/** 商品提报按钮操作 */
const handleProductReporting = async (row?: SupplierAddProductsVO) => {
  const _ids = row?.id || ids.value;
  const _names = row?.styleName || names.value;
  await proxy?.$modal.confirm('是否确认提报商品名称为"' + _names + '"的数据项？').finally(() => (loading.value = false));
  await auditSupplierAddProducts(_ids);
  proxy?.$modal.msgSuccess('提报成功');
  await getList();
};
/** 邀约响应 */
const handleInvite = (type: string, row?: SupplierAddProductsForm) => {
  dialogleInvite.visible = true;
  dialogleInvite.title = '邀约响应';
  if (type === 'single') {
    var list: any = [];
    list.push(row);
    formInvite.data = list;
  } else {
    formInvite.data = selectionInvite.value;
  }
  nextTick(() => {
    resetInvite();
  });
};

/** 邀约响应表单重置 */
const resetInvite = () => {
  // formInvite = { ...initFormDataInvite };
  supplierAddProductsFormRefInvite.value?.resetFields();
};

/** 邀约响应取消按钮 */
const cancelInvite = () => {
  resetInvite();
  dialogleInvite.visible = false;
};
/** 无货反馈按钮 */
const feedback = async (row?: SupplierAddProductsVO) => {
  const _ids = row?.id || ids.value;
  const _names = row?.styleName || names.value;
  dialogFile.visible = true;
  dialogFile.title = '无货反馈';
  feedbackData.value = row;
};
/** 无货反馈提交按钮 */
const submitFormFeedback = () => {
  feedbackFormRef.value?.validate(async (valid: boolean) => {
    buttonLoading.value = true;
    await hmProductsStock({ id: feedbackData.value.id, stockRemarks: feedbackForm.stockRemarks }).finally(() => (buttonLoading.value = false));
    proxy?.$modal.msgSuccess('反馈成功');
    dialogFile.visible = false;
    feedbackFormRef.value?.resetFields();
    await getList();
  });
};
/** 无货反馈取消按钮 */
function cancelFeedback() {
  dialogFile.visible = false;
  feedbackFormRef.value?.resetFields();
}
/** 邀约响应提交按钮 */
const submitFormInvite = () => {
  supplierAddProductsFormRefInvite.value?.validate(async (valid: boolean) => {
    if (valid) {
      const data = formInvite.data?.map((item: any) => {
        return {
          id: item.id,
          inventory: item.inventory,
          shippingMethod: formInvite.shippingMethod,
          driverPhone: formInvite.driverPhone,
          trackingNumber: formInvite.trackingNumber,
          shippingCompany: formInvite.shippingCompany
        };
      });
      buttonLoading.value = true;
      await auditSupplierInvite(data as any).finally(() => (buttonLoading.value = false));
      proxy?.$modal.msgSuccess('邀约成功');
      dialogleInvite.visible = false;
      await getList();
    }
  });
};

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download(
    'system/supplierAddProducts/export',
    {
      ...queryParams.value
    },
    `supplierAddProducts_${new Date().getTime()}.xlsx`
  );
};

onMounted(() => {
  /** 判断当前栏目名称
   *
   *  匹配不同状态 请求后台
   *  ''是供应商端商品提报
   *  4是供应商端样品邀约
   */
  switch (route.name) {
    case 'SupplierAddProducts':
      queryParams.value.auditStatus = '0,1,2,3,4,5,6,7';
      break;
    case 'SampleManagement':
      queryParams.value.auditStatus = '4,6';
      break;
    default:
      queryParams.value.auditStatus = '';
  }
  moduleName.value = route.name;
  queryParams.value.pageNum = 1;
  // 获取品牌信息
  getListBrand();
  getList();
});
</script>
<style lang="scss" scoped>
.color_disabled {
  color: #fff !important;
}

.hm-drawer .el-drawer__header {
  margin-bottom: 0px !important;
}

.hm-box-title {
  font-size: 21px;
  font-weight: bold;
  color: #1a1b1c;
  padding-bottom: 24px;
  border-bottom: 1px solid #f3f3f7;
}

.hm-form-title {
  font-size: 16px;
  font-weight: bold;
  color: #1a1b1c;
}

.hm-form-title {
  margin-bottom: 10px;
}

.hm-row3 {
  .el-form-item {
    // width: calc(100% - 80px);
    width: 100%;
    margin-right: 0px !important;
  }

  :deep(.el-date-editor--datetime) {
    width: 100% !important;

    .el-input__wrapper {
      width: 100%;
    }
  }

  .el-select {
    width: 100% !important;
  }
}

.mb96 {
  margin-bottom: 96px;
}

.collapse-enter-active,
.collapse-leave-active {
  transition: height 0.3s ease;
  overflow: hidden;
}

.collapse-enter,
.collapse-leave-to

/* .collapse-leave-active for <2.1.8 */
  {
  height: 0;
}

.collapse-content {
  background-color: #f0f0f0;
  padding: 10px;
  margin-top: 10px;
}
</style>